<!-- 项目图表 -->
<template>
  <el-row class="content" style="width: 100%; height: 100%;" justify="center">
    <XMBlockMutiBar :x-axis="projectCountAndAmountForScbk.xAxis" :amounts="projectCountAndAmountForScbk.amounts"
      :ysf="projectCountAndAmountForScbk.ysf" :ra="projectCountAndAmountForScbk.ra"
      :ca="projectCountAndAmountForScbk.ca" style="width: 33%" />
    <div class="select">
      <span>生产板块</span>
      <el-select v-model="selectScbk" placeholder="请选择" size="small" style="width: 60px;" @change="handleOnScbkChange">
        <el-option v-for="item in scbkOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <XMBusinessNumbar :ra="projectCountAndAmountForScbkByYelx.ra" :ca="projectCountAndAmountForScbkByYelx.ca"
      :ywlx="projectCountAndAmountForScbkByYelx.ywlx" style="width: 30%;" />
    <XMBusinessMoneyBar :ysf="projectAmountForScbkByYelx.ysf" :amounts="projectAmountForScbkByYelx.amounts"
      :ywlx="projectAmountForScbkByYelx.ywlx" style="width: 30%;" />
  </el-row>
</template>

<script setup>
import XMBlockMutiBar from './XMBlockMutiBar.vue';
import XMBusinessNumbar from './XMBusinessNumBar.vue';
import XMBusinessMoneyBar from './XMBusinessMoneyBar.vue';
import { getUniqueScbk, getProjectCountAndAmountForScbk, getProjectNsfCountForYelxByScbk, getProjectCountForYelxByScbk } from '@/api/screenApi';
import { ref, reactive, onMounted } from 'vue';

const props = defineProps({ year: Number });

const selectScbk = ref('测量');
const scbkOptions = ref([]);

const handleOnScbkChange = () => {
  loadProjectCountAndAmountForScbkByYelx();
  loadProjectAmountForScbkByYelx();
};

// 获取各生成板块下入案数量和拟收费金额
const projectCountAndAmountForScbk = reactive({});

const loadProjectCountAndAmountForScbk = async () => {
  await getProjectCountAndAmountForScbk(props.year).then(res => {
    console.log(res);
    if (Array.isArray(res.data.data)) {
      projectCountAndAmountForScbk.xAxis = res.data.data.map(item => item.scbk);
      projectCountAndAmountForScbk.amounts = res.data.data.map(item => item.value);
      projectCountAndAmountForScbk.ra = res.data.data.map(item => item.key);
      projectCountAndAmountForScbk.ca = res.data.data.map(item => item.ca);
      projectCountAndAmountForScbk.ysf = res.data.data.map(item => item.ysf);
    }
  });
  await getUniqueScbk(props.year).then(res => {
    scbkOptions.value = res.data.data.map(item => ({ value: item, label: item }));
    selectScbk.value = '全部';
  })
};

//项目：获取指定生产板块下各业务类型的入案数、出案数
const projectCountAndAmountForScbkByYelx = reactive({});

const loadProjectCountAndAmountForScbkByYelx = async () => {
  await getProjectCountForYelxByScbk(props.year, selectScbk.value).then(res => {
    if (Array.isArray(res.data.data)) {
      projectCountAndAmountForScbkByYelx.ra = res.data.data.map(item => item.key);
      projectCountAndAmountForScbkByYelx.ca = res.data.data.map(item => item.value);
      projectCountAndAmountForScbkByYelx.ywlx = res.data.data.map(item => item.ywlx);
    }
  });
};

// 项目：获取指定生产板块下各业务类型的拟收费
const projectAmountForScbkByYelx = reactive({});

const loadProjectAmountForScbkByYelx = async () => {
  await getProjectNsfCountForYelxByScbk(props.year, selectScbk.value).then(res => {
    if (Array.isArray(res.data.data)) {
      console.log('res.data.data', res.data.data);
      projectAmountForScbkByYelx.amounts = res.data.data.map(item => item.key);
      projectAmountForScbkByYelx.ysf = res.data.data.map(item => item.value);
      projectAmountForScbkByYelx.ywlx = res.data.data.map(item => item.ywlx);
    }
  });
};

const loadData = async () => {
  await loadProjectCountAndAmountForScbk();
  loadProjectCountAndAmountForScbkByYelx();
  loadProjectAmountForScbkByYelx();
}

onMounted(() => {
  loadData();
})
</script>

<style scoped>
.select {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}
</style>
